<template>
	<el-dialog v-model="props.isShow" width="28%" @close="handleClose" class="transaction-spot-dialog-dark">
		<template #title>
			<p class="text-18px font-bold text-#ffffff">保证金模式</p>
		</template>
		<template #default>
			<div class="w-full">
				<div class="mt-10px w-full">
					<div class="flex items-center">
						<p class="text-#ffffff">BTC/USDT</p>
						<p class="text-#86909C ml-20px">永续</p>
					</div>
					<div class="mt-20px flex items-center justify-between">
						<div class="w-49% text-18px text-[#fff]  rounded-10px flex items-center justify-center h-50px box-border border-1px border-solid"
						:class="{'border-#ffffff': selectedMode === '全仓','border-#272727':selectedMode !== '全仓'}" @click="selectedMode = '全仓'">
							全仓
						</div>
						<div class="w-49% text-18px text-[#fff]  rounded-10px flex items-center justify-center h-50px box-border border-1px border-solid"
						:class="{'border-#ffffff': selectedMode === '逐仓','border-#272727':selectedMode !== '逐仓'}" @click="selectedMode = '逐仓'">
							逐仓
						</div>
					</div>
					<div class="mt-30px text-12px text-#86909C">
						*调整保证金模式仅对当前合约生效。
					</div>
					<div class="mt-20px text-12px text-#86909C">
						*全仓保证金模式: 保证金资产相同的全仓仓位共享该资产的全仓保证金。在强
						平事件中，交易者可能会损失全部该保证金和该保证金资产下的所有全仓仓位。
					</div>
					<div class="mt-20px text-12px text-#86909C">
						*全仓保证金模式: 保证金资产相同的全仓仓位共享该资产的全仓保证金。在强
						平事件中，交易者可能会损失全部该保证金和该保证金资产下的所有全仓仓位。
					</div>
				</div>
				<div class="mt-40px">
					<el-button color="#114CEE" style="width: 100%;height:50px;color:#fff;font-size:18px;">确认</el-button>
				</div>
			</div>
		</template>

	</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface IProps {
	isShow: boolean;
}

const props = defineProps<IProps>();
const emit = defineEmits(['close'])

const selectedMode = ref<any>('全仓');

const handleClose = () => {
	emit('close', false);
}
</script>
<style scoped lang="scss">
::v-deep .el-input__wrapper {
	background-color: #272727;
	border: none;
	box-shadow: none;
}
</style>
<style lang="scss">
.transaction-spot-dialog-dark {
	background: #2B2B2B;
}


</style>
